/* Font Awesome Icons
   ------------------ */
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

/* Layout styles
******************/

.wrapper {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 700px;
  margin: 40px auto;
  text-align: center;
}
.intro {
  margin-bottom: 20px;
}
.outro {
  margin-top: 40px;
}

/* USB drive base styles
******************/
.usb-drive {
  display: block;
  float: left;
  width: 246px; /* Open size plus casing margin */

  margin: 25px auto;
  text-align: left;
  cursor: pointer;
  /* Stop text from being highlighted */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;

}
.usb-drive .casing,
.usb-drive .cap {
  color: #0378a9;
  background-color: #04aef4;
  border-top: 1px solid #04aef4;
  border-bottom: 1px solid #16b8fb;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: 0 5px 0  #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  background-color: #1eade9;
  background-image: -moz-linear-gradient(top, #2fc0fc, #0391cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2fc0fc), to(#0391cc));
  background-image: -webkit-linear-gradient(top, #2fc0fc, #0391cc);
  background-image: -o-linear-gradient(top, #2fc0fc, #0391cc);
  background-image: linear-gradient(to bottom, #2fc0fc, #0391cc);
  background-repeat: repeat-x;
}
.usb-drive > div {
  float: left;
  height: 50px;
}
.usb-drive .casing,
.usb-drive .cap {
  line-height: 50px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 1px rgba(255, 255, 255, 0.35);
}
.usb-drive .casing {
  width: 95px;
  margin-left: 36px;
  /* Offset by width of connector for centering */
  padding-left: 15px;
  padding-right: 10px;
  border-radius: 25px 0 0 25px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.usb-drive .connector {
  width: 0;
  position: relative;
  overflow: hidden;
  -webkit-transition: width 100ms ease-in-out;
  -moz-transition: width 100ms ease-in-out;
  -o-transition: width 100ms ease-in-out;
  transition: width 100ms ease-in-out;
}
.usb-drive .connector .inner {
  margin-top: 12px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  background-color: #afafaf;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(90%, #bfbfbf), to(#6f6f6f));
  background-image: -webkit-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
  background-image: -moz-linear-gradient(top, #999999, #bfbfbf 90%, #6f6f6f);
  background-image: -o-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
  background-image: linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
  background-repeat: no-repeat;
  -webkit-box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0  #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0  #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);
  box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0  #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);
}
.usb-drive .connector .inner span {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 7px;
  background-color: #333333;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);
  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);
}
.usb-drive .connector .inner span:first-of-type {
  top: 19px;
}
.usb-drive .connector .inner span:last-of-type {
  top: 29px;
}
.usb-drive .cap {
  width: 36px;
  padding-left: 10px;
  border-radius: 0 25px 25px 0;
  font-size: 18px;
}
.usb-drive:active,
.usb-drive.active {
  text-decoration: none;
}
.usb-drive:active .casing,
.usb-drive.active .casing,
.usb-drive:active .cap,
.usb-drive.active .cap {
  color: #FFF;
}
.usb-drive:hover .connector,
.usb-drive.hover .connector {
  width: 35px;
}


/* USB Drive Colouring (via LESS function)
****************************************/
.red .casing,
.red .cap {
  color: #761911;
  background-color: #b8271b;
  border-top: 1px solid #b8271b;
  border-bottom: 1px solid #ce2b1f;
  -webkit-box-shadow: 0 5px 0  #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  background-color: #c12c20;
  background-image: -moz-linear-gradient(top, #df3527, #951f16);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#df3527), to(#951f16));
  background-image: -webkit-linear-gradient(top, #df3527, #951f16);
  background-image: -o-linear-gradient(top, #df3527, #951f16);
  background-image: linear-gradient(to bottom, #df3527, #951f16);
  background-repeat: repeat-x;
}
.orange .casing,
.orange .cap {
  color: #b26800;
  background-color: #fe9500;
  border-top: 1px solid #fe9500;
  border-bottom: 1px solid #ffa019;
  -webkit-box-shadow: 0 5px 0  #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  background-color: #ee981e;
  background-image: -moz-linear-gradient(top, #ffaa32, #d57d00);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffaa32), to(#d57d00));
  background-image: -webkit-linear-gradient(top, #ffaa32, #d57d00);
  background-image: -o-linear-gradient(top, #ffaa32, #d57d00);
  background-image: linear-gradient(to bottom, #ffaa32, #d57d00);
  background-repeat: repeat-x;
}
.purple .casing,
.purple .cap {
  color: #542a82;
  background-color: #7a3dbc;
  border-top: 1px solid #7a3dbc;
  border-bottom: 1px solid #874dc6;
  -webkit-box-shadow: 0 5px 0  #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  background-color: #814eb9;
  background-image: -moz-linear-gradient(top, #9460cc, #66339d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9460cc), to(#66339d));
  background-image: -webkit-linear-gradient(top, #9460cc, #66339d);
  background-image: -o-linear-gradient(top, #9460cc, #66339d);
  background-image: linear-gradient(to bottom, #9460cc, #66339d);
  background-repeat: repeat-x;
}
.green .casing,
.green .cap {
  color: #2b732b;
  background-color: #40ab40;
  border-top: 1px solid #40ab40;
  border-bottom: 1px solid #4abb4a;
  -webkit-box-shadow: 0 5px 0  #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  background-color: #4cad4c;
  background-image: -moz-linear-gradient(top, #5cc25c, #358d35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5cc25c), to(#358d35));
  background-image: -webkit-linear-gradient(top, #5cc25c, #358d35);
  background-image: -o-linear-gradient(top, #5cc25c, #358d35);
  background-image: linear-gradient(to bottom, #5cc25c, #358d35);
  background-repeat: repeat-x;
}
.carbon .casing,
.carbon .cap {
  color: #CCC;
  background: linear-gradient(27deg, #222222 5px, transparent 5px) 0 5px, linear-gradient(207deg, #222222 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #2f2f2f 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #2f2f2f 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #282828 10px, transparent 10px), linear-gradient(#2a2a2a 25%, #1a1a1a 25%, #272727 50%, transparent 50%, transparent 75%, #313131 75%, #313131);
  background-color: #202020;
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  -o-background-size: 20px 20px;
  background-size: 20px 20px;
  -webkit-box-shadow: 0 5px 0  #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 0  #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0  #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
  border-top: 1px solid #333333;
  border-bottom: 1px solid #404040;
}
.carbon .cap {
  color: #ffc40d;
}

/* Float Clearfix */
.drives:before,
.drives:after {
  display: table;
  content: "";
  line-height: 0;
}
.drives:after {
  clear: both;
}

/* Font Awesome styles
   ------------------ */
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  /* sprites.less reset */
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}
.icon-cloud-download:before {
  content: "\f0ed";
}
.icon-cloud-upload:before {
  content: "\f0ee";
}
.icon-download:before {
  content: "\f01a";
}
.icon-upload:before {
  content: "\f01b";
}
.icon-share:before {
  content: "\f045";
}
.icon-star:before {
  content: "\f005";
}


